<template>
<view class="paper-item" hover-class="hover">
		<view class="box">
			<view class="name">
				<view class="content">{{itemName}}</view>
				<view class="name_bot">
					<view class="name_bot_l"><slot name='botLeft'></slot></view>
					<view class="name_bot_r"><slot name='botRight'></slot></view>
				</view>
			</view>
			<!-- 分数右侧 -->
			<slot name='right'></slot>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		itemName:{
			type:String,
			default:''	
		}
	}
};
</script>

<style scoped lang="scss">
	.paper-item{
		margin: 0;
		padding: 0 35upx;
		border-bottom: none;
	}
	.paper-item:last-child .box{
		border-bottom: none;
	}
	.box{
		display: flex;
		width: 100%	;
		padding: 35upx 0;
		border-bottom: 1px solid #EBEBEB;
	}
	.name{
		.content{
			width: 500upx;
		}
	}
	.name_bot{
		display: flex;
		justify-content: start;
		margin-top: 25upx;
		view{
			display: flex;
			justify-content: start;
			align-items: center;
			color: #A6A6A6;
			height: 35upx;
			line-height: 35upx;
		}
		.name_bot_l{
			width: 65%;
			text{
				max-width: 400upx;
			}
		}
		.name_bot_r{
			width: 35%;
		}
		text{
			display: block;
			height: 35upx;
			overflow: hidden;
		}
	}
</style>
